<template>
  <el-scrollbar style="height:100%;">
    <div>
      <div class="aboutContent" :class="personInfoClass">
        <header>关于我</header>
        <el-card class="box-card">
          <ul class="personalIntro">
            <p>个人介绍</p>
            <li>网名 : Kpods</li>
            <li>职业 : 学生</li>
            <li>兴趣 : 设计、编程、看动画、做视频</li>
            <li>自我简介 : 充满好奇心的一个人，搭建个人博客是希望能够记录自己的所见所闻所感，差不多是这样~</li>
          </ul>
          <ul class="skills">
            <p>擅长技能</p>
            <li>擅长Html、CSS、JavaScript、JQuery、Vue等Web前端技术</li>
            <li>擅长AE、PS、PR等设计软件</li>
          </ul>
          <ul class="blogHistory">
            <p>博客发展历程</p>
            <li>2020年12月20日 --- 仍在写着...</li>
            <li>2020年12月17日 --- 正在写着...</li>
          </ul>
        </el-card>
        <!-- 回到顶部小火箭 -->
        <template>
          <el-backtop>
            <div class="huojian">
              <i class="iconfont icon-huojian"></i>
            </div>
          </el-backtop>
        </template>
      </div>
      <el-footer>
        <div class="text1">Copyright © {{year}} by Kpods. All Rights Reserved.</div>
        <div class="text2">备案号......</div>
      </el-footer>
    </div>
  </el-scrollbar>
</template>

<script>
export default {
  data() {
    return {
      year: new Date().getFullYear(),
      // 窗口宽度
      windowWidth: document.documentElement.clientWidth
    }
  },
  computed: {
    // 判断屏幕宽度
    personInfoClass() {
      if (this.windowWidth >= 1080) {
        return 'PC_layout'
      } else if (this.windowWidth < 1080 && this.windowWidth >= 812) {
        return 'middle_layout'
      } else {
        return 'mobile_layout'
      }
    }
  },
  watch: {
    // 监听屏幕宽度
    '$store.state.screenWidth': function(val) { // 监听屏幕宽度变化
      this.windowWidth = val
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.el-scrollbar__wrap {
  overflow-x: hidden;
}
/deep/.el-scrollbar__view {
  height: 100%;
}
.aboutContent {
  position: relative;
  padding: 100px 250px 35px;
  background-image: linear-gradient(
    to right,
    rgba(199, 121, 208, 0.6),
    rgba(75, 133, 200, 0.6)
  );
  header {
    font-size: 30px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-weight: bold;
    letter-spacing: 5px;
  }
  .box-card {
    margin-top: 80px;
    ul {
      margin-bottom: 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 70px;
    }
    .personalIntro {
      height: 180px;
    }
    .skills {
      height: 100px;
    }
    p {
      font-size: 18px;
      font-weight: bold;
      letter-spacing: 3px;
      margin-bottom: 10px;
      padding-left: 15px;
      border-left: 5px solid #24283b;
    }
    .blogHistory {
      margin-bottom: 0px;
      li {
        margin: 10px 0;
      }
    }
  }
}
.middle_layout {
  padding: 100px 100px 35px;
}
.mobile_layout {
  padding: 100px 20px 35px;
}
.el-footer {
  // padding: 10px 250px;
  background-color: #24283b;
  color: #fff;
  border-top: 1px solid #cccccc;
  font-size: 14px;
  font-weight: 200;
  text-align: center;
  .text1 {
    padding-top: 10px;
  }
  .text2 {
    padding-bottom: 10px;
  }
}
</style>
